<template>
    <div>
        <div style="margin: 10px 0">
            <el-select v-model="position" placeholder="请选择主打位置">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-input style="width: 150px;margin-left: 5px" placeholder="请输入球员姓名" suffix-icon="el-icon-search"
                      v-model.trim="displayName"></el-input>
            <el-select v-model.trim="country" placeholder="请选择国籍">
                <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :value="item.value">
                </el-option>
            </el-select>
            <!-- <el-input style="width: 150px;margin-left: 5px" placeholder="请输入所在球队" suffix-icon="el-icon-search"
                       v-model.trim="displayAbbr"></el-input>-->
            <el-select v-model.trim="displayAbbr" placeholder="请输入所在球队">
                <el-option
                        v-for="item in team"
                        :key="item.id"
                        :value="item.displayAbbr">
                </el-option>
            </el-select>

            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <div style="margin: 10px 0">

            <el-button type="primary" @click="openPoster">添加</el-button>


            <el-button type="danger" slot="reference" @click="delBatch">批量删除</el-button>


        </div>
        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
                  @selection-change="handleSelectionChange" size="medium">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column
                    prop="playerImg"
                    label="球员图片"
                    width="100"
                    align="center"
            >
                <!--https://res.nba.cn/media/img/teams/logos/MIA_logo.svg-->
                <template slot-scope="scope">
                    <el-image class="article-cover"
                              :src="scope.row.playerImg"
                              :preview-src-list="[scope.row.playerImg]"/>
                </template>
            </el-table-column>
            <el-table-column prop="displayName" label="姓名" width="200px"></el-table-column>
            <el-table-column prop="displayAbbr" label="所在球队" width="150px"></el-table-column>
            <el-table-column prop="country" label="国籍" width="150px"></el-table-column>
            <el-table-column prop="position" label="主打位置"></el-table-column>
            <el-table-column prop="height" label="身高(cm)" width="120px"></el-table-column>
            <el-table-column prop="weight" label="体重" width="120px"></el-table-column>


            <el-table-column label="操作" width="100" align="center">

                <template slot-scope="scope">

                    <el-button type="primary" @click="edit(scope.row)" icon="el-icon-edit" circle></el-button>

                    <el-button @click="del(scope.row.id)" title="删除"
                               slot="reference" type="danger" icon="el-icon-delete" circle
                               style="margin-left: 10px"></el-button>

                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--弹窗-->

        <el-dialog
                title="更新信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form" label-width="120px">
                <el-form-item label="照片">
                    <el-upload
                            width="50%"
                            class="avatar-uploader"
                            :action="'http://' + serverIp +':9090/file/upload'"
                            ref="img"
                            :show-file-list="false"
                            :on-success="handleImgUploadSuccess1">
                        <img v-if="form.playerImg" :src="form.playerImg" style="width: 100%" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="球员姓名">
                    <el-input v-model="form.displayName" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="国籍">
                    <el-input maxlength="40" v-model="form.country" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="主打位置">
                    <el-select v-model="form.position" placeholder="请选择主打位置">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在球队">
                    <el-select v-model.trim="form.displayAbbr" placeholder="请输入所在球队">
                        <el-option
                                v-for="item in team"
                                :key="item.id"
                                :value="item.displayAbbr">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="照片链接">
                    <el-input v-model="form.playerImg" autocomplete="off" width="100px"></el-input>
                </el-form-item>
                <el-form-item label="身高(cm)">
                    <el-input v-model="form.height" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="体重">
                    <el-input v-model="form.weight" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>

        </el-dialog>
        <!--新增-->
        <el-dialog
                title="新增球员"
                :visible.sync="addDialogVisible"
                width="30%">
            <el-form :model="forms" label-width="120px" :rules="rules" ref="forms">

                <el-form-item label="照片">
                    <el-upload
                            width="50%"
                            class="avatar-uploader"
                            :action="'http://' + serverIp +':9090/file/upload'"
                            ref="img"
                            :show-file-list="false"
                            :on-success="handleImgUploadSuccess">
                        <img v-if="forms.playerImg" :src="forms.playerImg" style="width: 100%" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="球员名称" prop="displayName">
                    <el-input v-model="forms.displayName" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="国籍" prop="country">
                    <el-select v-model="forms.country" placeholder="请选择国籍">
                        <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主打位置" prop="position">
                    <el-select v-model="forms.position" placeholder="请选择主打位置">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在球队" prop="displayAbbr">
                    <el-select v-model.trim="forms.displayAbbr" placeholder="请输入所在球队">
                        <el-option
                                v-for="item in team"
                                :key="item.id"
                                :value="item.displayAbbr">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="照片链接">
                    <el-input v-model="forms.playerImg" autocomplete="off" width="100px"></el-input>
                </el-form-item>
                <el-form-item label="身高(cm)" prop="height">
                    <el-input v-model="forms.height" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="体重(公斤)" prop="weight">
                    <el-input v-model="forms.weight" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('forms')">取 消</el-button>
                <el-button type="primary" @click="addPlayer">确 定</el-button>
            </div>

        </el-dialog>


    </div>
</template>

<script>

    import request from '../utils/request'
    import {serverIp} from "../../public/config";

    export default {
        name: "Player",

        data() {
            return {

                options1: [
                    {value: '中国', label: '中国'},
                    {value: '美国', label: '美国'},
                    {value: '安哥拉', label: '安哥拉'},
                    {value: '阿富汗', label: '阿富汗'},
                    {value: '阿尔巴尼亚', label: '阿尔巴尼亚'},
                    {value: '阿尔及利亚', label: '阿尔及利亚'},
                    {value: '安道尔共和国', label: '安道尔共和国'},
                    {value: '安圭拉岛', label: '安圭拉岛'},
                    {value: '安提瓜和巴布达', label: '安提瓜和巴布达'},
                    {value: '阿根廷', label: '阿根廷'},
                    {value: '亚美尼亚', label: '亚美尼亚'},
                    {value: '阿森松', label: '阿森松'},
                    {value: '澳大利亚', label: '澳大利亚'},
                    {value: '奥地利', label: '奥地利'},
                    {value: '阿塞拜疆', label: '阿塞拜疆'},
                    {value: '巴哈马', label: '巴哈马'},
                    {value: '巴林', label: '巴林'},
                    {value: '孟加拉国', label: '孟加拉国'},
                    {value: '巴巴多斯', label: '巴巴多斯'},
                    {value: '白俄罗斯', label: '白俄罗斯'},
                    {value: '比利时', label: '比利时'},
                    {value: '伯利兹', label: '伯利兹'},
                    {value: '贝宁', label: '贝宁'},
                    {value: '百慕大群岛 ', label: '百慕大群岛'},
                    {value: '玻利维亚', label: '玻利维亚'},
                    {value: '博茨瓦纳', label: '博茨瓦纳'},
                    {value: '巴西', label: '巴西'},
                    {value: '文莱', label: '文莱'},
                    {value: '保加利亚', label: '保加利亚'},
                    {value: '布基纳法索', label: '布基纳法索'},
                    {value: '缅甸', label: '缅甸'},
                    {value: '布隆迪', label: '布隆迪'},
                    {value: '喀麦隆', label: '喀麦隆'},
                    {value: '加拿大', label: '加拿大'},
                    {value: '开曼群岛', label: '开曼群岛'},
                    {value: '中非共和国', label: '中非共和国'},
                    {value: '乍得', label: '乍得'},
                    {value: '智利', label: '智利'},
                    // {value:'中国',label:'中国'},
                    {value: '哥伦比亚', label: '哥伦比亚'},
                    {value: '刚果', label: '刚果'},
                    {value: '库克群岛', label: '库克群岛'},
                    {value: '哥斯达黎加', label: '哥斯达黎加'},
                    {value: '古巴', label: '古巴'},
                    {value: '塞浦路斯', label: '塞浦路斯'},
                    {value: '捷克', label: '捷克'},
                    {value: '丹麦', label: '丹麦'},
                    {value: '吉布提', label: '吉布提'},
                    {value: '多米尼加共和国', label: '多米尼加共和国'},
                    {value: '厄瓜多尔', label: '厄瓜多尔'},
                    {value: '埃及', label: '埃及'},
                    {value: '萨尔瓦多', label: '萨尔瓦多'},
                    {value: '爱沙尼亚', label: '爱沙尼亚'},
                    {value: '埃塞俄比亚', label: '埃塞俄比亚'},
                    {value: '斐济', label: '斐济'},
                    {value: '芬兰', label: '芬兰'},
                    {value: '法国', label: '法国'},
                    {value: '法属圭亚那', label: '法属圭亚那'},
                    {value: '法属玻利尼西亚', label: '法属玻利尼西亚'},
                    {value: '加蓬', label: '加蓬'},
                    {value: '冈比亚', label: '冈比亚'},
                    {value: '格鲁吉亚', label: '格鲁吉亚'},
                    {value: '德国', label: '德国'},
                    {value: '加纳', label: '加纳'},
                    {value: '直布罗陀', label: '直布罗陀'},
                    {value: '希腊', label: '希腊'},
                    {value: '格林纳达', label: '格林纳达'},
                    {value: '关岛', label: '关岛'},
                    {value: '危地马拉', label: '危地马拉'},
                    {value: '几内亚', label: '几内亚'},
                    {value: '圭亚那', label: '圭亚那'},
                    {value: '海地', label: '海地'},
                    {value: '洪都拉斯', label: '洪都拉斯'},
                    {value: '匈牙利', label: '匈牙利'},
                    {value: '冰岛', label: '冰岛'},
                    {value: '印度', label: '印度'},
                    {value: '印度尼西亚', label: '印度尼西亚'},
                    {value: '伊朗', label: '伊朗'},
                    {value: '伊拉克', label: '伊拉克'},
                    {value: '爱尔兰', label: '爱尔兰'},
                    {value: '以色列', label: '以色列'},
                    {value: '意大利', label: '意大利'},
                    {value: '科特迪瓦', label: '科特迪瓦'},
                    {value: '牙买加', label: '牙买加'},
                    {value: '日本', label: '日本'},
                    {value: '约旦', label: '约旦'},
                    {value: '柬埔寨', label: '柬埔寨'},
                    {value: '哈萨克斯坦', label: '哈萨克斯坦'},
                    {value: '肯尼亚', label: '肯尼亚'},
                    {value: '韩国', label: '韩国'},
                    {value: '科威特', label: '科威特'},
                    {value: '吉尔吉斯坦', label: '吉尔吉斯坦'},
                    {value: '老挝', label: '老挝'},
                    {value: '拉脱维亚', label: '拉脱维亚'},
                    {value: '黎巴嫩', label: '黎巴嫩'},
                    {value: '莱索托', label: '莱索托'},
                    {value: '利比里亚', label: '利比里亚'},
                    {value: '利比亚', label: '利比亚'},
                    {value: '列支敦士登', label: '列支敦士登'},
                    {value: '立陶宛', label: '立陶宛'},
                    {value: '卢森堡', label: '卢森堡'},
                    {value: '马达加斯加', label: '马达加斯加'},
                    {value: '马拉维', label: '马拉维'},
                    {value: '马来西亚', label: '马来西亚'},
                    {value: '马尔代夫', label: '马尔代夫'},
                    {value: '马里', label: '马里'},
                    {value: '马耳他', label: '马耳他'},
                    {value: '马里亚那群岛', label: '马里亚那群岛'},
                    {value: '马提尼克', label: '马提尼克'},
                    {value: '毛里求斯', label: '毛里求斯'},
                    {value: '墨西哥', label: '墨西哥'},
                    {value: '摩尔多瓦', label: '摩尔多瓦'},
                    {value: '摩纳哥', label: '摩纳哥'},
                    {value: '蒙古', label: '蒙古'},
                    {value: '蒙特塞拉特岛', label: '蒙特塞拉特岛'},
                    {value: '摩洛哥', label: '摩洛哥'},
                    {value: '莫桑比克', label: '莫桑比克'},
                    {value: '纳米比亚', label: '纳米比亚'},
                    {value: '瑙鲁', label: '瑙鲁'},
                    {value: '尼泊尔', label: '尼泊尔'},
                    {value: '荷属安的列斯', label: '荷属安的列斯'},
                    {value: '荷兰', label: '荷兰'},
                    {value: '新西兰', label: '新西兰'},
                    {value: '尼加拉瓜', label: '尼加拉瓜'},
                    {value: '尼日尔', label: '尼日尔'},
                    {value: '尼日利亚', label: '尼日利亚'},
                    {value: '朝鲜', label: '朝鲜'},
                    {value: '挪威', label: '挪威'},
                    {value: '阿曼', label: '阿曼'},
                    {value: '巴基斯坦', label: '巴基斯坦'},
                    {value: '巴拿马', label: '巴拿马'},
                    {value: '巴布亚新几内亚', label: '巴布亚新几内亚'},
                    {value: '巴拉圭', label: '巴拉圭'},
                    {value: '秘鲁', label: '秘鲁'},
                    {value: '菲律宾', label: '菲律宾'},
                    {value: '波兰', label: '波兰'},
                    {value: '葡萄牙', label: '葡萄牙'},
                    {value: '波多黎各', label: '波多黎各'},
                    {value: '卡塔尔', label: '卡塔尔'},
                    {value: '留尼旺', label: '留尼旺'},
                    {value: '罗马尼亚', label: '罗马尼亚'},
                    {value: '俄罗斯', label: '俄罗斯'},
                    {value: '圣文森特岛', label: '圣文森特岛'},
                    {value: '东萨摩亚(美)', label: '东萨摩亚(美)'},
                    {value: '西萨摩亚', label: '西萨摩亚'},
                    {value: '圣马力诺', label: '圣马力诺'},
                    {value: '圣多美和普林西比', label: '圣多美和普林西比'},
                    {value: '沙特阿拉伯', label: '沙特阿拉伯'},
                    {value: '塞内加尔', label: '塞内加尔'},
                    {value: '塞舌尔', label: '塞舌尔'},
                    {value: '塞拉利昂', label: '塞拉利昂'},
                    {value: '新加坡', label: '新加坡'},
                    {value: '斯洛伐克', label: '斯洛伐克'},
                    {value: '斯洛文尼亚', label: '斯洛文尼亚'},
                    {value: '所罗门群岛', label: '所罗门群岛'},
                    {value: '索马里', label: '索马里'},
                    {value: '南非', label: '南非'},
                    {value: '西班牙', label: '西班牙'},
                    {value: '斯里兰卡', label: '斯里兰卡'},
                    {value: '圣卢西亚', label: '圣卢西亚'},
                    {value: '圣文森特', label: '圣文森特'},
                    {value: '苏丹', label: '苏丹'},
                    {value: '苏里南', label: '苏里南'},
                    {value: '斯威士兰', label: '斯威士兰'},
                    {value: 'Sweden', label: '瑞典'},
                    {value: '瑞典', label: '瑞士'},
                    {value: '叙利亚', label: '叙利亚'},
                    {value: '塔吉克斯坦', label: '塔吉克斯坦'},
                    {value: '坦桑尼亚', label: '坦桑尼亚'},
                    {value: '泰国', label: '泰国'},
                    {value: '多哥', label: '多哥'},
                    {value: '汤加', label: '汤加'},
                    {value: '特立尼达和多巴哥', label: '特立尼达和多巴哥'},
                    {value: '突尼斯', label: '突尼斯'},
                    {value: '土耳其', label: '土耳其'},
                    {value: '土库曼斯坦', label: '土库曼斯坦'},
                    {value: '乌干达', label: '乌干达'},
                    {value: '乌克兰', label: '乌克兰'},
                    {value: '阿拉伯联合酋长国', label: '阿拉伯联合酋长国'},
                    {value: '英国', label: '英国'},
                    {value: '乌拉圭', label: '乌拉圭'},
                    {value: '乌兹别克斯坦', label: '乌兹别克斯坦'},
                    {value: '委内瑞拉', label: '委内瑞拉'},
                    {value: '越南', label: '越南'},
                    {value: '也门', label: '也门'},
                    {value: '南斯拉夫', label: '南斯拉夫'},
                    {value: '津巴布韦', label: '津巴布韦'},
                    {value: '扎伊尔', label: '扎伊尔'},
                    {value: '赞比亚', label: '赞比亚'}
                ],


                options: [{
                    value: '前锋',
                    label: '前锋'
                }, {
                    value: '中锋',
                    label: '中锋'
                },
                    {
                        value: '中锋-前锋',
                        label: '中锋-前锋'
                    },

                    {
                        value: '前锋-中锋',
                        label: '前锋-中锋'
                    },
                    {
                        value: '后卫',
                        label: '后卫'
                    }, {
                        value: '后卫-前锋',
                        label: '后卫-前锋'
                    },],
                comment: '',
                serverIp: serverIp,

                rules: {
                    displayAbbr: [
                        {required: true, message: '请填写球队名称', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    country: [
                        {required: true, message: '请输入国籍', trigger: 'blur'},
                        // {min: 1, max: 20, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    displayName: [
                        {required: true, message: '请输入球员姓名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    position: [
                        {required: true, message: '请选择主打位置', trigger: 'blur'},

                    ],
                    height: [
                        {required: true, message: '请输入球员身高', trigger: 'blur'},

                    ],
                    weight: [
                        {required: true, message: '请输入球员体重', trigger: 'blur'},

                    ],


                },
                forms: {},
                form: {},
                addDialogVisible: false,
                serverIp: serverIp,
                dialogImageUrl: '',
                dialogVisible: false,
                tableData: [],
                displayName: '',
                country: '',
                position: '',
                displayAbbr: '',

                multipleSelection: [],
                pageNum: 1,
                pageSize: 5,
                total: 0,
                //    所有球队
                team: []
            }
        },
        created() {
            request.get("/team/findAll").then(res => {
                this.team = res.data
            })
            this.load()
        },
        methods: {
            handleImgUploadSuccess1(res){
                this.form.playerImg = res
            },
            handleImgUploadSuccess(res) {
                this.forms.playerImg = res
            },

            resetForm(formName) {
                console.log(formName)
                this.$nextTick(() => {
                    this.$refs.forms.resetFields();
                })

                this.addDialogVisible = false

            },
            //新增
            addPlayer() {
                this.$refs['forms'].validate((valid) => {
                    if (valid) {  // 表单校验合法

                        request.post('/player/addPlayer', this.forms).then(res => {
                            if (res.code === '200') {
                                this.$message({message: '添加成功', type: "success"})
                                this.load()
                                this.addDialogVisible = false
                                this.forms = {}
                            } else {
                                this.$message({message: '添加失败', type: "error"})
                            }

                        })
                    }
                })

            },

            openPoster() {
                this.addDialogVisible = true
            },
            //更新
            save() {
                request.put('/player/updatePlayer', this.form).then(res => {
                    if (res.code === '200') {
                        this.$message({message: '更新成功', type: "success"})
                        this.load()
                        this.dialogVisible = false
                    } else {
                        this.$message({message: '更新失败', type: "success"})
                    }
                })
            },

//编辑
            edit(row) {

                this.form = row
                this.dialogVisible = true
            },

            load() {
                request.get("/player/page", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        displayName: this.displayName,
                        country: this.country,
                        position: this.position,
                        displayAbbr: this.displayAbbr
                    }
                }).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total

                })
            },
            changeEnable(row) {

                request.put("/poster/updatePoster", row).then(res => {
                    if (res.code === '200') {
                        this.$message({message: '操作成功', type: "success"})
                    }
                })
            },
            del(id) {
                this.$confirm('你确定要删除,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    request.delete("/player/deletePlayer/" + id).then(res => {
                        if (res.code === '200') {
                            this.$message({message: '删除成功', type: "success"})
                            this.load()
                        } else {
                            this.$message({message: '删除失败', type: "error"})
                        }
                    })
                }).catch(() => {
                    this.$message({
                        message: '已取消删除',
                        type: 'success'
                    })
                })
            },
            handleSelectionChange(val) {

                this.multipleSelection = val

            },
            delBatch() {
                this.$confirm('你确定要删除,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
                    request.post("/player/del/batch", ids).then(res => {
                        if (res.code === '200') {
                            this.$message({message: '批量删除成功', type: "success"})
                            this.load()
                        } else {
                            this.$message({message: '批量删除失败', type: "error"})
                        }
                    })
                }).catch(() => {
                    this.$message({
                        message: '已取消删除',
                        type: 'success'
                    })
                })

            },
            reset() {
                this.displayName = ""
                this.country = ""
                this.position = ""
                this.displayAbbr = ""
                this.load()
            },
            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.pageNum = pageNum
                this.load()
            },
            handleFileUploadSuccess(res) {
                console.log(res)
                this.$message({message: '上传成功', type: "success"})
                this.load()
            },
            download(url) {
                window.open(url)
            },
            /*        preview(url) {
                        window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
                    },*/
            preview(index) {
                this.dialogImageUrl = index;
                this.dialogVisible1 = true;
            },
        }
    }
</script>

<style scoped>

</style>
